之前介紹的只是 JavaScript 的基本語法，今天要來介紹 DOM(Document Object Model)，它可以操作所有的 HTML tag，讓網頁可以有互動及功能性，
首先要介紹的是 Window Object，JavaScript 運行的地方就是 window，無論開啟的瀏覽器是 Chrome,Firefox 或 Safari...等，只要開啟瀏覽器的瞬間，window object 就會出現，而 Window Object 包含了 methods 和 properties，如果我們在開啟瀏覽器時 console.log(window) 可以看到一個非常巨大的物件，裡面包含非常多的 methods 和 properties。

Window Object methods

常見的 window object methods 有：addEventListener()、alert()、prompt()、blur()、print()、setInterval()、clearInterval()、setTimeout()、clearTimeout()...等，這邊先介紹幾個較常使用的，而 addEventListener() 在 Event 的主題會詳細介紹。
執行 window 的 methods 時，window 皆可省略

• window.alert()
  執行後會跳出一個視窗
• window.prompt()
  執行後會跳出一個對話視窗，可讓使用者輸入內容

要特別注意的是，在prompt() 中輸入的內容，最後都會是 String，所以要如果在 promt() 輸入數字，就要使用 Number()，把輸入的值由 String 轉換為 Number

結合 alert() 和 prompt()，可以製作一個簡單的效果，例如：

function myFunction() {
  let person = prompt("請輸入你的名字");
  if (person != null) {
    alert("Hello ! " + person );
  }
}
myFunction();

執行這個 function 後，會跳出 prompt 視窗，輸入名字後結果如下

按下確定後，就會跳出 Hello ! May 的 alert 視窗

• window.setInterval()
  設定每隔幾秒的時間要執行一個 function
  （1000 為 1 秒，1500 為 1.5 秒，2000 為 2 秒...依此類推）

function sayHi(){
    console.log("Hi");
}
setInterval(sayHi,1000)

執行上面的程式碼，我們會看到每隔一秒，就執行 sayHi 這個 function 一次

• window.clearInterval()
  用途為把setInterval()停掉
  例如：
  在 html 中新增一個按鈕，按下按鈕後立即停止 setInterval。

<button onclick="stop()">Stop</button>

function sayHi(){
    console.log("Hi");
}
let myInterval = setInterval(sayHi,1000)
function stop(){
    clearInterval(myInterval);
}

執行上面的程式碼後，點擊停止按鈕即執行 clearInterval，上面設定的每隔 1 秒執行一次的 setInterval function 就會馬上停止。

Window Object properties

這裡來介紹 2 種 Window Object properties，這 2 種 Window Object properties 都是 Object，有自己的 methods 和 properties，不過要注意的是，不是所有的 Window Object properties 都是 Object!!!!!
常見的 Window Object properties 有 Console、Document、SessionStorage、LocalStorage、innerHeight、innerWidth、screen...等，今天先簡單介紹 Console 和 Document 這兩個。

Console

console 的 properties 並不常拿來做使用，因此這裡只介紹 console 的 methods。

• console.table()
  將資料整理成表格來顯示

let people = ["Bob","Josh","Carol","Ann","Kelly"];
console.table(people); // 結果如下圖

• console.log()
  檢查程式碼是否正確被執行時常使用的功能

console.log(123)

• console.error()
  會出現紅色錯誤圖案

console.error(123)

• console.warn()
  會出現黃色驚嘆號

console.warn(123)

Document

get...By() return 的是 HTMLCollection
querySelectorAll() return 的是 NodeList
Array 和 NodeList 可以使用 forEach，但是 HTMLCollection 無法使用 forEach
所以大多數人使用 querySelector 系列而不使用 get 系列，因為資料無法用 forEach 操作

property:

有 body、doctype、charset、head...等。

methods:

• querySelectorAll()
  裡面可以放各種 tag，例如 h1, div, p...等，而選取 class 時要在前面加 .，選取 id 時要在前面加 #。
  所有滿足條件的都會 return 回來，存在一個 NodeList 裡面，看起來很像 Array 但並不是Array，可以用索引值抓資料，有 length 屬性，也可以用forEach，但用其他 Array 的方法就會出錯。
  例如：
  有三個 class 都是 test，可以用索引值抓取某一個

    <p class="test">Apple</p>
    <p class="test">Banana</p>
    <p class="test">Watermelon</p>

let test = document.querySelectorAll(".test");
console.log(test[0]); // <p class="test">Apple</p>
console.log(test); // 回傳一個 NodeList，結果如下圖

• querySelector()
  裡面可以放各種 tag，例如 h1, div, p...等，而選取 class 時要在前面加 .，選取 id 時要在前面加 #。
  只會 return 第一個滿足條件的，所以如果有很多一樣名稱的元素，想要抓到全部時，要用上面的方法 querySelectorAll()。
  將上面的程式碼改成 querySelector，會發現結果只會回傳第一個元素：Apple。

    <p class="test">Apple</p>
    <p class="test">Banana</p>
    <p class="test">Watermelon</p>

let test = document.querySelector(".test"); 
console.log(test); // <p class="test">Apple</p>

• getElementById()
  用 id 取得 Element
• getElementsByClassName()
  用 class 取得 Element
• creatElement()
  用來建立新的元素，通常搭配其他方法做使用，如 appendChild()，下一篇文章會介紹到。